<template>
  <view class="index">
    <FixedTitle Title="订单"></FixedTitle>
    <BlankDiv></BlankDiv>
    <Filter :tabList="tabList" @onChange="handleClickTabs"></Filter>

    <custormTabbar ref="tabbar"></custormTabbar>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import custormTabbar from "../../components/Tabbar/index.vue";
import uaLoading from "../../components/pageLoading/index.vue";
import FixedTitle from "../../components/FixedTitle/fixed-title.vue";
import Filter from "../../components/filter/index.vue";
import BlankDiv from '../../components/blank_div/index.vue';

const loadingstyle = ref(false);
const tabList = ref([
  {
    id: 0,
    name: "全部",
  },
  {
    id: 1,
    name: "已创建",
  },
  {
    id: 2,
    name: "已支付",
  },
  {
    id: 3,
    name: "已出票",
  },
  {
    id: 4,
    name: "已退票",
  },
]);
const handleClickTabs = (e) => {};
onMounted(() => {
  loadingstyle.value = true;
});
</script>

<style lang="scss">
.home-index-container {
  display: flex;
  flex-direction: column;

  .custom-loading {
    display: inline-flex;
    align-items: flex-end;
    gap: 5px;
    min-height: 45px;
  }

  .custom-loading em {
    background: #5232b7;
    border-radius: 6px;
    display: inline-block;
    height: 100%;
    width: 10px;
    animation: animHeart 2s linear infinite;
  }

  @keyframes animHeart {
    0%,
    100% {
      height: 15px;
      background: #5232b7;
    }

    50% {
      height: 45px;
      background: #999;
    }
  }

  .custom-loading em:nth-child(2) {
    animation-delay: 0.2s;
  }

  .custom-loading em:nth-child(3) {
    animation-delay: 0.4s;
  }

  .custom-loading em:nth-child(4) {
    animation-delay: 0.6s;
  }

  .custom-loading em:nth-child(5) {
    animation-delay: 0.8s;
  }
}
</style>
